<template>
  <div class="standard-grid --padding-horizontal --auto-rows search-index">
    <div class="search-index__input">
       <search-input :songLists="songLists" @searchData="searchData"></search-input>
    </div>
    <div class="search-index__content">
      <div class="search-index__tips" v-if="search.length==0">
        <p>随便听听</p>
        <ul><li v-for="(badge,index)  in badgeLists" :key="index">{{badge.title}}</li></ul>
      </div>
      <div class="search-index__lists" v-else>
        <common-lists :data="search"></common-lists>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import SearchInput from '../../components/common/input'
  import CommonLists from '../../components/common/common-lists'
   @Component({
    components:{
      SearchInput,
      CommonLists
    }
  })
  export default class SearchIndex extends Vue {

    private badgeLists=[
      {title:'开始懂了'},
      {title:'我好想你'},
      {title:'听雪'},
      {title:'死了都要爱'},
      {title:'青花瓷'},
      {title:'街角的祝福'},
      {title:'洋葱'}
    ]
     private songLists=[
       {name:'因为爱情', author:'王菲&陈奕迅'},
       {name:'god is a girl', author:'sdbvhdf'}
     ]

     private search=[];

     private searchData(data){
      this.search=data
     }

  }
</script>
<style lang="scss">
  @include component(search-index){
    @extend %padding;

    @include part(input){
      width: 100%;
      @include loop-breakpoints(){
        height: #{ $gridel-row-height * 4 + rem };
      }
      position: absolute;
      left: 0;
      top: $mobile-row-7;
      background: #D9D9D9;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

     @include part(content){
       grid-column: 1 / 2 span;
       margin-top: $mobile-row-5;
     }

    @include part(tips){
      @include baseline($font-size-1125,$skip-lines:1,$auto-lines:false);

      p{
        @include baseline($font-size-1,$skip-lines:1,$auto-lines:false);
            &:before{
              display: inline-block;
              content: '';
              width: 24px;
              height: 24px;
              background-image: url("../../assets/imgs/icons/music.svg");
              background-size: cover;
            }
      }

      ul{

        li{
          display: inline-block;
          border: 1px solid #67C23A ;
          padding-left: 0.8rem;
          padding-right: 0.8rem;
          border-radius: 10px;
          margin: 0.5rem 3px;
        }
      }
    }

  }
</style>
